<template>
  <section class="news-info flex justify-between">
    <section class="news-info-main-wrap">
      <ul class="news-info-class flex flex-center">
        <li class="class-title font-lg" v-for="item in classList.titleList" :key="item.index"
          :class="{ 'class-active': item.index == classfy }" @click="getClass(item.index)">
          {{ item.title }}
        </li>
      </ul>
      <section class="class-item">
        {{ newsInfo.list }}
        <infoItem :infoList="newsInfo.hot"></infoItem>
      </section>
      <div class="more-load font-md font-normal">
        <div v-if="state.loading">数据加载中...</div>
        <div v-else-if="state.loadingFail">数据加载失败...</div>
        <div v-else-if="!newsInfo.hot.length">暂无信息</div>
      </div>
      <div class="arrow-wrap flex-center" v-if="state.total > 1">
        <div class="arrow left" @click="handleClick(-1)">
          <div class="infont-icon"></div>
        </div>
        <div class="num text-body">
          {{ state.page }}<span class="mx-1">/</span>{{ state.total }}
        </div>
        <div class="arrow right" @click="handleClick(1)">
          <div class="infont-icon"></div>
        </div>
        <div class="jump-wrap flex">
          <span class="font-m">跳转到</span>
          <input type="number" class="jump-input" v-model="jumpPage" @input="hanldeInput" />
          <div class="jump-btn" @click="hanldePage">GO</div>
        </div>
      </div>
    </section>
    <section class="news-aside">
      <Information :list="sideData.info">项目中心</Information>
      <Hotinfo :list="sideData.hot">资讯热榜</Hotinfo>
      <Movie :list="sideData.video">影视拍摄</Movie>
    </section>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getNewsList, getHotList } from "@/api";

// 引入组件
import infoItem from "./components/infoItem.vue";
import Information from "./components/information.vue";
import Hotinfo from "./components/hotinfo_list.vue";
import Movie from "./components/movie.vue";

const classfy = ref(0);
const jumpPage = ref(1);
const classList = reactive({
  titleList: [
    {
      index: 0,
      title: "热点",
    },
    {
      index: 1,
      title: "行业资讯",
    },
    {
      index: 2,
      title: "公司要闻",
    },
  ],
});
// 新闻资讯数据
// classify:0表示公司要闻，1表示行业资讯
// 列表数据
const newsInfo:any = reactive({
  hot: [] as any,
});
//  侧边栏数据
const sideData = reactive({
  info: [
    {
      title: "媒体传播中心",
      url: "/project?code=classify_1a50d44",
    },
    {
      title: "政府合作中心",
      url: "/project?code=classify_1ee87ed",
    },
    {
      title: "绿色低碳传播中心",
      url: "/project?code=classify_22b0790",
    },
    {
      title: "乡村振兴推广中心",
      url: "/project?code=classify_264a3db",
    },
    {
      title: "国际事务中心",
      url: "/project?code=classify_2973a67",
    },
    {
      title: "品牌文化中心",
      url: "/project?code=classify_2d4c88a",
    },
    {
      title: "健康中国中心",
      url: "/project?code=classify_378a6e6",
    },
    {
      title: "会展会务中心",
      url: "/project?code=classify_3c6d1de",
    },
    {
      title: "数字科技中心",
      url: "/project?code=classify_455caaf",
    },
    {
      title: "区域发展规划中心",
      url: "/project?code=classify_4988ee9",
    }
  ],
  hot: [
    {
      title: "",
      top: true,
      index: 0,
    }
  ],
  video: [
    {
      src: "",
      person: "",
      timeNumber: 3456,
    }
  ],
});

const state = reactive({
  page: 0,
  total: 0,
  loading: false,
  loadingFail: false,
});

const getClass = (index: any) => {
  classfy.value = index;
  init();
  getDate();
};

onMounted(() => {
  getDate();
  getHot();
});

const getDate = (num: number = 1) => {
  let params = {
    page: state.page + num,
    size: 10,
    classify: classfy.value,
  };
  state.loading = true;
  if (state.loadingFail) {
    state.loadingFail = false;
  }
  getNewsList(params)
    .then((res: any) => {
      const { count, current_page, last_page, list } = res;
      state.page = current_page;
      state.total = last_page;
      newsInfo.hot = list;
      state.loading = false;
    })
    .catch(() => {
      state.loading = false;
      state.loadingFail = true;
    });
};
const init = () => {
  state.page = 0;
  state.total = 0;
};
//分页
const handleClick = (num: number) => {
  if (state.page + num >= 1 && state.page + num <= state.total) {
    getDate(num);
  }
};
// 输入框的输入
const hanldeInput = () => {
  if (jumpPage.value > state.total) {
    jumpPage.value = state.total
  }
}
//跳转到某一页
const hanldePage = () => {
  let params = {
    page: jumpPage.value,
    size: 10,
    classify: classfy.value,
  };
  state.loading = true;
  if (state.loadingFail) {
    state.loadingFail = false;
  }
  getNewsList(params)
    .then((res: any) => {
      const { count, current_page, last_page, list } = res;
      state.page = current_page;
      state.total = last_page;
      newsInfo.hot = list;
      state.loading = false;
    })
    .catch(() => {
      state.loading = false;
      state.loadingFail = true;
    });
};
// 获取资讯热榜
const getHot = () => {
  getHotList().then((res: any) => {
    const data = res;
    sideData.hot = data;
  });
}
</script>

<style lang="scss" scoped>
.news-info {
  margin: 0 auto;
  margin-bottom: 75px;
  padding-top: 45px;
  width: 1440px;
}

.news-info-main-wrap {
  width: 880px;
}

.class-title {
  margin-right: 45px;
  cursor: pointer;
}

.class-title:last-child {
  margin-right: 0;
}

.class-active {
  color: #ff0000;
}

/* 加载更多 */
.more-load {
  margin-top: 30px;
  text-align: center;
  color: #9195a3;
}

/* right aside */
.news-aside {
  width: 418px;
}

/* 分页 */
.arrow-wrap {
  margin-top: 30px;

  .num {
    margin: 0 50px;
    font-size: 16px;
  }

  .arrow {
    position: relative;
    width: 45px;
    height: 45px;
    font-size: 0;
    background: #ffffff;
    border: 1px solid #9195a3;
    border-radius: 12px;
    cursor: pointer;

    .infont-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 0px;
      transform: translate(-50%, -50%);

      &::before {
        content: "";
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        height: 0;
        width: 0;
        transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0px;
        height: 2px;
        background: #9195a3;
        display: inline-block;
        transform: translateY(-50%);
        transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      }
    }

    &.left {
      .infont-icon {
        &::before {
          margin-left: -4px;
          border-right: 6px solid #9195a3;
        }

        &::after {
          right: -10px;
        }
      }
    }

    &.right {
      .infont-icon {
        &::before {
          border-left: 6px solid #9195a3;
        }

        &::after {
          left: -5px;
        }
      }
    }

    &:hover {
      .infont-icon {
        &::after {
          width: 14px;
        }
      }
    }

    &.left:hover {
      .infont-icon {
        &::before {
          margin-left: -8px;
        }
      }
    }

    &.right:hover {
      .infont-icon {
        &::before {
          margin-left: 8px;
        }
      }
    }
  }

  .jump-wrap {
    margin-left: 100px;

    span {
      line-height: 45px;
    }

    .jump-input {
      display: inline-block;
      margin-left: 20px;
      padding: 0 10px;
      width: 65px;
      height: 45px;
      text-align: center;
      border: 1px solid #9195a3;
      border-radius: 12px;
    }

    .jump-btn {
      margin-left: 20px;
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      border: 1px solid #9195a3;
      border-radius: 12px;
      cursor: pointer;
    }
  }
}
</style>
